<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

  <style>
<!--    公共  -->
    *{
      margin: 0;
      padding: 0;
    }
    a
    {
      text-decoration: none;
    }

    .main
    {
      width: 1000px;
      margin: 0 auto;
      overflow: hidden;
    }

  /*  一层*/
  .f1
  {
    margin-bottom: 10px;
  }
  /*一层左*/
  .f1>.left
  {
    width: 611px;
    height: 376px;
    background-color: gray;
    margin-right: 10px;
    float: left;
  }
  /*一层右*/
  .f1>.right
  {
    width: 375px;
    height: 376px;
    background-color: yellow;
    float: left;
  }
  /*二层*/
  .f2
  {

  }
  /*二层左*/
  .f2>.left
  {
    width: 366px;
    height: 233px;
    background-color: pink;
    margin-right: 20px;
    float: left;
  }
  /*二层card*/
  .f2>.card
  {
    width: 198px;
    height: 233px;
    background-color: blue;
    margin-right: 8px;
    float: left;
  }

  .f2>.card3
  {
    margin-right: 0;
  }



  </style>


</head>
<body>
  <div class="main">
    <div class="f1">
      <div class="left"></div>
      <div class="right"> </div>
    </div>
    <div class="f2">
      <div class="left"></div>
      <div class="card"></div>
      <div class="card"></div>
      <div class="card card3"></div>
    </div>
  </div>


</body>
</html>